<template>
  <div class="register-container">
    <!-- 左侧装饰区域 -->
    <div class="register-bg">
      <div class="bg-overlay"></div>
      <div class="bg-content">
        <h1 class="logo">🐌<span>MD</span></h1>
        <p class="slogan">智能在线文本编辑</p>
        <div class="bg-features">
          <div class="feature-item">
            <i class="icon-file-text"></i>
            <p>实时协作编辑</p>
          </div>
          <div class="feature-item">
            <i class="icon-cloud"></i>
            <p>云端同步存储</p>
          </div>
          <div class="feature-item">
            <i class="icon-check-circle"></i>
            <p>安全数据保护</p>
          </div>
        </div>
      </div>
    </div>

    <!-- 右侧表单区域 -->
    <div class="register-form">
      <div class="form-header">
        <h2>创建您的账户</h2>
        <p>请填写以下信息完成注册</p>
      </div>

      <!-- 表单主体 -->
      <form @submit.prevent="handleSubmit">
        <!-- 用户类型选择 -->
        <div class="form-group">
          <label>用户类型</label>
          <div class="role-selector">
            <div
              class="role-option"
              :class="{ active: form.role === 0 }"
              @click="form.role = 0"
            >
              <i class="icon-user"></i>
              <span>教师</span>
            </div>
            <div
              class="role-option"
              :class="{ active: form.role === 1 }"
              @click="form.role = 1"
            >
              <i class="icon-graduation-cap"></i>
              <span>学生</span>
            </div>
          </div>
        </div>

        <!-- 用户名 -->
        <div class="form-group">
          <label for="name">真实姓名</label>
          <div class="input-container">
            <i class="icon-user"></i>
            <input
              type="text"
              id="name"
              v-model="form.name"
              placeholder="请输入您的真实姓名"
              :class="{ error: errors.name }"
            >
          </div>
          <p class="error-message" v-if="errors.name">{{ errors.name }}</p>
        </div>

        <!-- 账号 -->
        <div class="form-group">
          <label for="account">账号</label>
          <div class="input-container">
            <i class="icon-envelope"></i>
            <input
              type="text"
              id="account"
              v-model="form.account"
              placeholder="请输入您的账号"
              :class="{ error: errors.account }"
            >
          </div>
          <p class="error-message" v-if="errors.account">{{ errors.account }}</p>
        </div>

        <!-- 密码 -->
        <div class="form-group">
          <label for="password">密码</label>
          <div class="input-container">
            <i class="icon-lock"></i>
            <input
              :type="passwordVisible ? 'text' : 'password'"
              id="password"
              v-model="form.password"
              placeholder="请输入密码"
              :class="{ error: errors.password }"
            >
            <i
              class="icon-eye"
              @click="passwordVisible = !passwordVisible"
            ></i>
          </div>
          <p class="error-message" v-if="errors.password">{{ errors.password }}</p>
          <p class="password-hint">密码长度至少8位，包含字母和数字</p>
        </div>

        <!-- 确认密码 -->
        <div class="form-group">
          <label for="confirmPassword">确认密码</label>
          <div class="input-container">
            <i class="icon-lock"></i>
            <input
              :type="confirmPasswordVisible ? 'text' : 'password'"
              id="confirmPassword"
              v-model="form.confirmPassword"
              placeholder="请再次输入密码"
              :class="{ error: errors.confirmPassword }"
            >
            <i
              class="icon-eye"
              @click="confirmPasswordVisible = !confirmPasswordVisible"
            ></i>
          </div>
          <p class="error-message" v-if="errors.confirmPassword">{{ errors.confirmPassword }}</p>
        </div>

      <!-- 专业 -->
       <div v-if = "form.role === 1 ">
        <div class="form-group">
          <label for="major">专业</label>
          <div class="input-container">
            <i class="icon-envelope"></i>

            <select id="city" v-model="form.major" class="form-control">
              <option disabled value="">请选择</option>
              <option v-for="majoy in majoys" :key="majoy" :value="majoy">
                {{ majoy }}
              </option>
            </select>
            
          </div>
        </div>
      </div> 

        <!-- 隐私政策同意 -->
        <div class="form-group">
          <label class="checkbox">
            <input type="checkbox" v-model="form.agreeTerms">
            <span class="checkbox-custom"></span>
            我已阅读并同意<a href="#" class="link">服务条款</a>和<a href="#" class="link">隐私政策</a>
          </label>
          <p class="error-message" v-if="errors.agreeTerms">{{ errors.agreeTerms }}</p>
        </div>

        <!-- 提交按钮 -->
        <button
          type="submit"
          class="submit-btn"
          :disabled="loading"
        >
          <span v-if="!loading">立即注册</span>
          <span v-else class="loading-spinner"></span>
        </button>
      </form>

      <!-- 登录链接 -->
      <div class="form-footer">
        <p>
          已有账号?
          <router-link to="/login" class="link">立即登录</router-link>
        </p>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, reactive } from 'vue';
import { useRouter } from 'vue-router';
import { useUserStore } from '@/stores/userStore';
import userInfo from '@/api/modules/userLogin';

const router = useRouter();
const userStroe = useUserStore();
const majoys =["java","网安"]
// 表单数据
const form = reactive({
  name: '',
  account: '',
  password: '',
  confirmPassword: '',
  role: 1, // 默认学生
  agreeTerms: false,
  major:"" 
});

// 表单验证错误
const errors = reactive({
  name: '',
  account: '',
  password: '',
  confirmPassword: '',
  agreeTerms: ''
});

// 状态控制
const loading = ref(false);
const passwordVisible = ref(false);
const confirmPasswordVisible = ref(false);

// 表单验证
const validateForm = () => {
  // 重置错误
  Object.keys(errors).forEach(key => (errors[key as keyof typeof errors] = ''));

  let isValid = true;

  // 验证姓名
  if (!form.name.trim()) {
    errors.name = '请输入真实姓名';
    isValid = false;
  }

  // 验证账号
  if (!form.account.trim()) {
    errors.account = '请输入账号';
    isValid = false;
  }

  // 验证密码
  if (!form.password) {
    errors.password = '请输入密码';
    isValid = false;
  } else if (form.password.length < 8) {
    errors.password = '密码长度至少8位';
    isValid = false;
  } else if (!/\d/.test(form.password) || !/[a-zA-Z]/.test(form.password)) {
    errors.password = '密码必须包含字母和数字';
    isValid = false;
  }

  // 验证确认密码
  if (form.password !== form.confirmPassword) {
    errors.confirmPassword = '两次输入的密码不一致';
    isValid = false;
  }

  // 验证同意条款
  if (!form.agreeTerms) {
    errors.agreeTerms = '请同意服务条款和隐私政策';
    isValid = false;
  }

  return isValid;
};

// 处理提交
const handleSubmit = async () => {
  if (!validateForm()) return;

  loading.value = true;

  try {
    // 准备注册数据
    const registerData = {
      name: form.name,
      account: form.account,
      password: form.password,
      role: form.role,
      major:form.major
    };

    // 调用注册API
    const response = await userInfo.userRegister(registerData);

    if (response.code === 200) {
      alert('注册成功！请登录');
      router.push('/login');
    } else {
      alert(response.message || '注册失败，请重试');
    }
  } catch (error: any) {
    console.error('注册请求失败', error);
    alert(error.response?.data?.message || '网络错误，请稍后再试');
  } finally {
    loading.value = false;
  }
};
</script>

<style scoped>
/* 基础样式 */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', sans-serif;
}

body {
  min-height: 100vh;
  background-color: #f5f7fa;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #333;
  overflow-x: hidden;
}

/* 注册容器 */
.register-container {
  width: 100%;
  max-width: 1200px;
  height: 85vh;
  max-height: 700px;
  border-radius: 24px;
  overflow: hidden;
  box-shadow: 0 15px 40px rgba(0, 0, 0, 0.1);
  display: flex;
  background: linear-gradient(135deg, #6366f1 0%, #8b5cf6 100%);
  position: relative;
  z-index: 10;
}

/* 左侧背景区域 */
.register-bg {
  flex: 1;
  position: relative;
  background: linear-gradient(135deg, #4f46e5 0%, #7c3aed 100%);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 60px 80px;
  color: white;
}

.register-bg::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: url("data:image/svg+xml,%3Csvg width='100' height='100' viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M11 18c3.866 0 7-3.134 7-7s-3.134-7-7-7-7 3.134-7 7 3.134 7 7 7zm48 25c3.866 0 7-3.134 7-7s-3.134-7-7-7-7 3.134-7 7 3.134 7 7 7zm-43-7c1.657 0 3-1.343 3-3s-1.343-3-3-3-3 1.343-3 3 1.343 3 3 3zm63 31c1.657 0 3-1.343 3-3s-1.343-3-3-3-3 1.343-3 3 1.343 3 3 3zM34 90c1.657 0 3-1.343 3-3s-1.343-3-3-3-3 1.343-3 3 1.343 3 3 3zm56-76c1.657 0 3-1.343 3-3s-1.343-3-3-3-3 1.343-3 3 1.343 3 3 3zM12 86c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm28-65c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm23-11c2.76 0 5-2.24 5-5s-2.24-5-5-5-5 2.24-5 5 2.24 5 5 5zm-6 60c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm29 22c2.76 0 5-2.24 5-5s-2.24-5-5-5-5 2.24-5 5 2.24 5 5 5zM32 63c2.76 0 5-2.24 5-5s-2.24-5-5-5-5 2.24-5 5 2.24 5 5 5zm57-13c2.76 0 5-2.24 5-5s-2.24-5-5-5-5 2.24-5 5 2.24 5 5 5zm-9-21c1.105 0 2-.895 2-2s-.895-2-2-2-2 .895-2 2 .895 2 2 2zM60 91c1.105 0 2-.895 2-2s-.895-2-2-2-2 .895-2 2 .895 2 2 2zM35 41c1.105 0 2-.895 2-2s-.895-2-2-2-2 .895-2 2 .895 2 2 2zM12 60c1.105 0 2-.895 2-2s-.895-2-2-2-2 .895-2 2 .895 2 2 2z' fill='%23ffffff' fill-opacity='0.05' fill-rule='evenodd'/%3E%3C/svg%3E") no-repeat;
  background-size: cover;
  opacity: 0.3;
}

.bg-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(180deg, rgba(79, 70, 229, 0.8), rgba(124, 58, 237, 0.6));
  z-index: 1;
}

.bg-content {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  height: 100%;
  justify-content: space-between;
}

.logo {
  font-size: 36px;
  font-weight: 700;
  margin-bottom: 10px;
  display: flex;
  align-items: center;
}

.logo span {
  color: #f97316;
}

.slogan {
  font-size: 18px;
  opacity: 0.9;
  max-width: 80%;
}

.bg-features {
  margin-top: auto;
}

.feature-item {
  display: flex;
  align-items: center;
  margin-bottom: 24px;
  opacity: 0.9;
  transition: all 0.3s ease;
}

.feature-item:hover {
  transform: translateX(5px);
  opacity: 1;
}

.feature-item i {
  font-size: 24px;
  margin-right: 16px;
  width: 30px;
  text-align: center;
}

.feature-item p {
  font-size: 16px;
}

/* 右侧表单区域 */
.register-form {
  flex: 1;
  background: white;
  padding: 60px 80px;
  display: flex;
  flex-direction: column;
  overflow-y: auto;
}

.form-header {
  margin-bottom: 40px;
}

.form-header h2 {
  font-size: 32px;
  font-weight: 700;
  color: #1f2937;
  margin-bottom: 10px;
}

.form-header p {
  color: #6b7280;
  font-size: 16px;
}

/* 表单组 */
.form-group {
  margin-bottom: 28px;
}

.form-group label {
  display: block;
  margin-bottom: 8px;
  font-size: 14px;
  font-weight: 500;
  color: #4b5563;
}

/* 角色选择器 */
.role-selector {
  display: flex;
  gap: 20px;
}

.role-option {
  flex: 1;
  padding: 16px;
  border: 2px solid #e5e7eb;
  border-radius: 12px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.3s ease;
  background-color: #f9fafb;
}

.role-option:hover {
  border-color: #4f46e5;
  background-color: rgba(79, 70, 229, 0.05);
}

.role-option.active {
  border-color: #4f46e5;
  background-color: rgba(79, 70, 229, 0.1);
  box-shadow: 0 4px 12px rgba(79, 70, 229, 0.15);
}

.role-option i {
  font-size: 32px;
  margin-bottom: 10px;
  color: #4f46e5;
}

.role-option span {
  font-weight: 500;
  color: #374151;
}

/* 输入容器 */
.input-container {
  position: relative;
  display: flex;
  align-items: center;
  border: 1px solid #d1d5db;
  border-radius: 10px;
  overflow: hidden;
  transition: all 0.3s ease;
}

.input-container:focus-within {
  border-color: #4f46e5;
  box-shadow: 0 0 0 3px rgba(79, 70, 229, 0.1);
}

.input-container.error {
  border-color: #ef4444;
  box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.1);
}

.input-container i {
  width: 50px;
  height: 50px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #9ca3af;
  background-color: #f3f4f6;
  border-right: 1px solid #e5e7eb;
  font-size: 18px;
}

.input-container input {
  flex: 1;
  height: 50px;
  padding: 0 16px;
  border: none;
  outline: none;
  font-size: 16px;
  color: #374151;
  background-color: transparent;
}
.input-container select {
  flex: 1;
  height: 50px;
  padding: 0 16px;
  border: none;
  outline: none;
  font-size: 16px;
  color: #374151;
  background-color: transparent;
}

.input-container input::placeholder {
  color: #9ca3af;
}

.input-container .icon-eye {
  border-left: 1px solid #e5e7eb;
  border-right: none;
  cursor: pointer;
}

.input-container .icon-eye:hover {
  color: #4f46e5;
}

/* 密码提示 */
.password-hint {
  font-size: 12px;
  color: #6b7280;
  margin-top: 8px;
  padding-left: 8px;
  border-left: 2px solid #e5e7eb;
}

/* 复选框 */
.checkbox {
  display: flex;
  align-items: center;
  cursor: pointer;
  user-select: none;
}

.checkbox input {
  position: absolute;
  opacity: 0;
  cursor: pointer;
  height: 0;
  width: 0;
}

.checkbox-custom {
  position: relative;
  width: 20px;
  height: 20px;
  border: 2px solid #d1d5db;
  border-radius: 4px;
  margin-right: 10px;
  transition: all 0.2s ease;
}

.checkbox input:checked~.checkbox-custom {
  background-color: #4f46e5;
  border-color: #4f46e5;
}

.checkbox input:checked~.checkbox-custom::after {
  content: "";
  position: absolute;
  left: 6px;
  top: 2px;
  width: 4px;
  height: 9px;
  border: solid white;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}

.checkbox .link {
  color: #4f46e5;
  text-decoration: none;
  font-weight: 500;
  transition: color 0.2s ease;
}

.checkbox .link:hover {
  color: #3b82f6;
  text-decoration: underline;
}

/* 错误消息 */
.error-message {
  color: #ef4444;
  font-size: 13px;
  margin-top: 6px;
  padding-left: 8px;
  border-left: 2px solid #ef4444;
}

/* 提交按钮 */
.submit-btn {
  width: 100%;
  height: 56px;
  background: linear-gradient(90deg, #4f46e5, #7c3aed);
  color: white;
  border: none;
  border-radius: 12px;
  font-size: 16px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.3s ease;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 20px;
  box-shadow: 0 8px 20px rgba(79, 70, 229, 0.25);
}

.submit-btn:hover {
  background: linear-gradient(90deg, #4338ca, #6d28d9);
  transform: translateY(-2px);
  box-shadow: 0 10px 25px rgba(79, 70, 229, 0.3);
}

.submit-btn:active {
  transform: translateY(0);
  box-shadow: 0 8px 20px rgba(79, 70, 229, 0.25);
}

.submit-btn:disabled {
  opacity: 0.7;
  cursor: not-allowed;
}

.loading-spinner {
  width: 20px;
  height: 20px;
  border: 2px solid white;
  border-top-color: transparent;
  border-radius: 50%;
  animation: spin 1s linear infinite;
}

@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}

/* 表单底部 */
.form-footer {
  margin-top: 30px;
  text-align: center;
}

.form-footer p {
  font-size: 14px;
  color: #6b7280;
}

.form-footer .link {
  color: #4f46e5;
  text-decoration: none;
  font-weight: 500;
  transition: color 0.2s ease;
}

.form-footer .link:hover {
  color: #3b82f6;
  text-decoration: underline;
}

/* 响应式设计 */
@media (max-width: 1024px) {
  .register-container {
    flex-direction: column;
    max-height: none;
    height: auto;
    margin: 40px 20px;
  }

  .register-bg {
    height: 300px;
    padding: 40px;
  }

  .register-form {
    padding: 40px;
  }

  .logo {
    font-size: 30px;
  }

  .slogan {
    font-size: 16px;
  }

  .bg-features {
    display: none;
  }

  .form-header h2 {
    font-size: 28px;
  }
}

@media (max-width: 768px) {
  .register-bg {
    height: 250px;
  }

  .role-selector {
    flex-direction: column;
  }

  .role-option {
    flex-direction: row;
    justify-content: flex-start;
    padding: 12px 16px;
  }

  .role-option i {
    font-size: 24px;
    margin-bottom: 0;
    margin-right: 12px;
  }
}
</style>
